<template>
	<div class="choicenessBox">
		<div class="choicenessTop"><span class="choicenessTitle">相关推荐</span></div>
		<div class="choicenessBtm">
			<a class="block_a software" :href="Path + item?.url" v-for="item in contentList">
				<img :src="getImgPath(item.headImag)" alt="" class="softwareLeft" />

				<div class="softwareRight">
					<p class="p1 flowHidden">{{ item.title }}</p>
					<!-- <p class="p2">{{item.tips}}</p> -->
					<p class="p3">{{ item.extend.enclosureUpload?.length ? item.extend.enclosureUpload[0].resourceSize : '未知' }}</p>

					<span class="p4" @click.stop.prevent="downLoadFile(item)">立即下载</span>
				</div>
			</a>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			Path: getRootPath(),
			query: GetQueryString(),
			contentList: [],
			imgPath: imgPath
		};
	},
	mounted() {
		this.getContentOfChannel();
	},
	methods: {
		getContentOfChannel() {
			let param = {
				contentId: this.query.id,
				orderBy: 2
			};
			contentApi.getRelationContentList(param, res => {
				if (res.code == '00000 00000') {
					this.contentList = res.data;
				} else {
				}
			});
		},
		getImgPath(url) {
			return imgPath(url);
		},
		downLoadFile(item) {
			let param = {
				contentId: item.id,
				resIds: item.extend.enclosureUpload[0]?.id
			};
			contentApi.downloadAnnexs(param, res => {
				downloadFile(res.data, item.title + '.zip');
			});
		}
	}
};
</script>

<style>
.choicenessBox {
	margin-top: 60px;
	width: 840px;

	.choicenessTop {
		display: flex;

		.choicenessTitle {
			height: 24px;
			font-size: 24px;
			font-weight: 500;
			color: #333333;
			line-height: 24px;
		}

		.choicenessTabs {
			margin-left: 48px;
			display: flex;
			align-items: flex-end;

			.choicenessTabsName {
				box-sizing: border-box;
				padding-bottom: 8px;
				margin-right: 32px;
				height: 22px;
				font-size: 14px;
				font-weight: 400;
				color: #666666;
				line-height: 14px;
			}

			.tabsActive {
				color: #333333;
				font-weight: 500;
				border-bottom: 2px solid #ff3333;
			}
		}
	}

	.choicenessBtm {
		margin-top: 12px;
		display: flex;
		flex-wrap: wrap;

		.software {
			margin-left: 12px;
			margin-top: 12px;
			box-sizing: border-box;
			width: 201px;
			height: 96px;
			padding: 12px 20px;
			background: #ffffff;
			display: flex;
			align-items: center;
			cursor: pointer;

			.softwareLeft {
				width: 48px;
				height: 48px;
			}

			.softwareRight {
				margin-top: 8px;
				margin-left: 12px;
				position: relative;
				height: 48px;
				flex: 1;

				.p1 {
					cursor: pointer;
					width: 92px;

					height: 14px;
					font-size: 14px;
					line-height: 14px;
					font-weight: 400;
					color: #333333;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					&:hover {
						color: #ff3333;
					}
				}

				.p2,
				.p3 {
					margin-top: 12px;
					height: 12px;
					font-size: 12px;
					line-height: 12px;
					font-weight: 400;
					color: #333333;
				}
				.p3{
					color:#666;
				}

				.p4 {
					display: none;
					cursor: pointer;
					position: absolute;
					margin-top: 12px;
					padding: 6px 8px;
					height: 12px;
					font-size: 12px;
					font-weight: 500;
					color: #ffffff;
					line-height: 12px;
					background: #3ace72;
					border-radius: 4px;

					&:hover {
						background: #60db8b;
					}

					&:active {
						background: #27a85d;
					}
				}
			}

			&:hover {
				background: #f8f8f8;

				.p3 {
					display: none;
				}

				.p4 {
					display: block;
				}
			}
		}

		.software:nth-child(4n + 1) {
			margin-left: 0;
		}
	}
}
</style>
